<template>
  <div class="statistics">
    <div class="top">
      <div class="sales">
        <page-header title="销售额统计" @filte="salesFilte" />
        <div class="sales-container">
          <div v-loading="chartLoading" class="sales-chart-container">
            <chart id="salesChart" ref="salesChart" :options="salesChartOptions" height="100%" width="100%" />
          </div>
          <div class="sales-sort-container">
            <h3>商品销售额排名</h3>
            <div v-loading="sortLoading" class="box">
              <ul class="sales-sort">
                <li v-for="(pdt, index) in pdtSort" :key="index" @click="toDetail(pdt.mdseId)">
                  <p class="index">{{ index+1 }}</p>
                  <div class="info">
                    <p class="name text-ellipsis">{{ pdt.name }}</p>
                    <p class="property text-ellipsis">{{ pdt.propertyValueName }}</p>
                  </div>
                  <p class="count">{{ pdt.salesNum }}件</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="order">
        <page-header title="订单量占比" :has-filter="false" />
        <div v-loading="orderChartLoding" class="order-chart-container">
          <chart id="orderChart" ref="orderChart" :options="orderChartOptions" height="100%" width="100%" />
        </div>
      </div>
    </div>
    <div class="middle">
      <div class="visitor">
        <page-header title="访问量/收藏数统计" @filte="visitorFilte" />
        <div v-loading="visitLoding" class="chart-container">
          <div class="visitor-chart-container">
            <chart id="visitorChart" :options="visitorChartOptions" height="100%" width="100%" />
          </div>
          <div class="collection-chart-container">
            <chart id="collectionChart" :options="collectionChartOptions" height="100%" width="100%" />
          </div>
        </div>
        <div class="sort-container">
          暂无数据
        </div>
      </div>
      <div class="category">
        <page-header title="销售额类别占比" :has-filter="false" />

        <div class="category-chart-container">
          <chart id="categoryChart" :options="categoryChartOptions" height="100%" width="100%" />
        </div>
      </div>
      <div class="equipment">
        <page-header title="用户使用设备统计" :has-filter="false" />
        <div style="width:100%;height:200px">暂无数据</div>
      </div>
    </div>
    <div class="bottom">
      <div class="sales-count">
        <page-header title="订单商品数量统计" @filte="salesCountFilte" />
        <div v-loading="chartOrderLoading" class="sales-count-chart-container">
          <chart id="salesCountChart" ref="salesCountChart" :options="salesCountChartOptions" height="100%" width="100%" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import pageHeader from './components/Header';
import Chart from '@/components/Charts/LineMarker';
import { lastDates, lastMonth } from 'recentlyjs';

import { getMdseSalesData, getSalesVolumeData, getOderPurchaseData, getShopOrder, getVisitData } from '@/api/statistics';
export default {
  name: 'Statistics',
  components: {
    pageHeader,
    Chart
  },
  data() {
    return {
      chartLoading: false,
      sortLoading: false,
      chartOrderLoading: false,
      orderChartLoding: false,
      visitLoding: false,
      pdtSort: [],
      // 销售额统计
      salesChartOptions: {
        color: ['#1890FF'],
        title: {
          top: 20,
          text: '销售额趋势',
          textStyle: {
            fontWeight: 'bolder',
            fontSize: 14,
            color: '#000'
          },
          left: '3%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: lastDates(7),
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}W',
              margin: 5,
              textStyle: {
                fontSize: 14
              }
            }
          }
        ],
        series: [
          {
            name: '销售额',
            type: 'bar',
            barWidth: '60%',
            data: []
          }
        ]
      },
      // 订单量占比
      orderChartOptions: {
        color: ['#1890FF', '#36CBCB', '#FAD337', '#F2637B', '#975FE4'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          left: 'center',
          top: '20',
          data: ['已完成', '待收货', '待发货', '待付款', '退款中']
        },
        series: [
          {
            name: '订单信息',
            type: 'pie',
            radius: '50%',
            center: ['50%', '60%'],
            top: 'top',
            label: {
              show: false
            },
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]

      },
      // 访问量
      visitorChartOptions: {
        title: {
          top: 10,
          text: '用户访问量',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 14,
            color: '#a8abb8'
          },
          left: 35
        },
        grid: {
          top: 30,
          left: 0,
          right: '2%',
          bottom: 0,
          containLabel: false
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
          axisLine: {
            lineStyle: {
              color: 'transparent'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'transparent'
            }
          },
          splitLine: { // 分隔线
            lineStyle: {
              color: 'transparent'
            }
          }
        },
        series: [{
          data: [],
          type: 'line',
          smooth: true,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 1
            }
          },
          areaStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0, 136, 212, 0.2)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(0,136,212)',
              borderColor: 'rgba(0,136,212,0.2)',
              borderWidth: 0
            }
          }
        }]
      },
      // 收藏量
      collectionChartOptions: {
        title: {
          top: 10,
          text: '用户收藏数',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 14,
            color: '#a8abb8'
          },
          left: 35
        },
        grid: {
          top: 30,
          left: 0,
          right: '2%',
          bottom: 0,
          containLabel: false
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
          axisLine: {
            lineStyle: {
              color: 'transparent'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'transparent'
            }
          },
          splitLine: { // 分隔线
            lineStyle: {
              color: 'transparent'
            }
          }
        },
        series: [{
          data: [],
          type: 'line',
          smooth: true,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 1
            }
          },
          areaStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0, 136, 212, 0.2)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(0,136,212)',
              borderColor: 'rgba(0,136,212,0.2)',
              borderWidth: 0
            }
          }
        }]
      },
      // 销售额类别占比
      categoryChartOptions: {
        color: ['#1890FF', '#36CBCB', '#4DCB73', '#FAD337', '#F2637B', '#975FE4'],
        title: {
          top: 10,
          text: '销售额',
          textStyle: {
            fontWeight: 'bolder',
            fontSize: 14,
            color: '#000'
          },
          left: 35
        },
        tooltip: {
          alwaysShowContent: false,
          trigger: 'item',
          confine: false,
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '销售额',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '20',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 335, name: '桥梁材料' },
              { value: 310, name: '地铁材料' },
              { value: 234, name: '隧道材料' },
              { value: 135, name: '水利材料' },
              { value: 1548, name: '交安养护' },
              { value: 365, name: '其他材料' }
            ]
          }
        ]
      },
      // 订单商品数量统计图表配置项
      salesCountChartOptions: {
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        legend: {
          top: 20,
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: ['销售件数', '支付笔数'],
          left: 'center',
          textStyle: {
            fontSize: 12,
            color: '#3C4353'
          }
        },
        grid: {
          top: 100,
          left: '2%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          data: lastDates(7)
        }],
        yAxis: [{
          type: 'value',
          name: '销售件数',
          axisTick: {
            show: false
          },
          axisLine: { // 坐标轴线
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            formatter: '{value} 件',
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: { // 分隔线
            lineStyle: {
              color: '#dce1ee',
              type: 'dashed'
            }
          }
        },
        {
          type: 'value',
          name: '支付笔数',
          position: 'right',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            formatter: '{value} 单',
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#dce1ee',
              type: 'dashed'
            }
          }
        }],
        series: [
          {
            name: '销售件数',
            type: 'line',
            smooth: false, // 是否平滑曲线显示。
            symbol: 'circle', // tips指示点类型
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(0,136,212)',
                borderColor: 'rgba(0,136,212,0.2)',
                borderWidth: 12
              }
            },
            data: []
          },
          {
            name: '支付笔数',
            type: 'line',
            smooth: false,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            yAxisIndex: 1, // 坐标轴位置
            lineStyle: {// 折线样式
              normal: {
                width: 1,
                color: '#FFA4A6'
              }
            },
            itemStyle: { // 指示点、示例样式
              normal: {
                color: 'rgb(255,164,166)',
                borderColor: 'rgba(255,164,166,0.27)',
                borderWidth: 12
              }
            },
            data: []
          }]
      }
    };
  },
  computed: {
    ...mapGetters([
      'shopInfo'
    ])
  },
  mounted() {
    this.getSalesVolumeData(7);
    this.getMdseSalesData(7);
    this.getOderPurchaseData(7);
    this.getShopOrder();
    this.getVisitData(7);
  },
  methods: {
    toDetail(id) {
      sessionStorage.setItem('goodsDetail', id);
      this.$router.push('/goods/detail');
    },
    getSalesVolumeData(day) { // 销售额统计
      const shopId = this.shopInfo.id;
      this.chartLoading = true;
      let x;
      switch (day) {
        case 365:
          x = lastMonth(12);
          break;
        case 30:
          x = lastDates(30);
          break;
        case 7:
          x = lastDates(7);
      }
      new Promise((resolve, reject) => {
        getSalesVolumeData({ shopId, day: day + '' }).then(({ data }) => {
          const newData = data.map(price => price / 10000 / 100);
          this.salesChartOptions.xAxis[0].data = x;
          this.salesChartOptions.series[0].data = newData;
          this.chartLoading = false;
          resolve(data);
        }).catch(error => {
          reject(error);
        });
      });
    },
    getMdseSalesData(day) { // 销售排行
      const shopId = this.shopInfo.id;
      this.sortLoading = true;
      new Promise((resolve, reject) => {
        getMdseSalesData({ shopId, day: day + '' }).then(({ data }) => {
          const pdts = data.sales;
          pdts.length = 5;
          this.pdtSort = pdts;
          this.sortLoading = false;
          resolve(data);
        }).catch(error => {
          reject(error);
        });
      });
    },
    salesFilte(item) {
      this.getSalesVolumeData(item.value);
      this.getMdseSalesData(item.value);
    },
    getVisitData(day) { // 访问量统计
      const shopId = this.shopInfo.id;
      this.visitLoading = true;
      new Promise((resolve, reject) => {
        getVisitData({ shopId, day: day + '' }).then(({ data }) => {
          this.visitorChartOptions.xAxis.data = lastDates(day);
          this.collectionChartOptions.xAxis.data = lastDates(day);
          this.visitorChartOptions.series[0].data = data;
          this.collectionChartOptions.series[0].data = data;
          this.visitLoading = false;
          resolve(data);
        }).catch(error => {
          reject(error);
        });
      });
    },
    visitorFilte(item) {

    },
    getOderPurchaseData(day) { // 获取订单商品数量统计 销售件数、成交件数
      const shopId = this.shopInfo.id;
      this.chartOrderLoading = true;
      new Promise((resolve, reject) => {
        getOderPurchaseData({ shopId, day: day + '' }).then(({ data }) => {
          const { sales, order } = data;
          this.salesCountChartOptions.xAxis[0].data = lastDates(day);
          this.salesCountChartOptions.series[0].data = sales;
          this.salesCountChartOptions.series[1].data = order;
          this.chartOrderLoading = false;
          resolve(data);
        }).catch(error => {
          reject(error);
        });
      });
    },
    salesCountFilte(item) {
      this.getOderPurchaseData(item.value);
    },
    getShopOrder() { // 订单数据
      const shopId = this.shopInfo.id;
      this.orderChartLoding = true;
      new Promise((resolve, reject) => {
        getShopOrder({ shopId }).then(({ data }) => {
          const { pendingPayment, pendingOrders, pendingRefund, completed, pendingShip } = data;
          this.orderChartOptions.series[0].data = [
            { value: completed, name: '已完成' },
            { value: pendingOrders, name: '待收货' },
            { value: pendingShip, name: '待发货' },
            { value: pendingPayment, name: '待付款' },
            { value: pendingRefund, name: '退款中' } // 这个不得对
          ];
          this.orderChartLoding = false;
          resolve(data);
        }).catch(error => {
          reject(error);
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import '~@/styles/finance-statistics.scss';

</style>
